<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沟通</title>
    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/dev/plugins/layui/layui/css/layui.css">
    <link rel="stylesheet" href="/dev/assets/css/job/page/JrMessage.css">
    <link rel="icon" href="/dev/assets/img/geek-job/wanli.jpg" type="image/x-icon">
    <script>
        e();

        function e() {
            // 在这里执行条件检查

            let token = localStorage.getItem("jrtoken")
            if (token==null) {
                // 执行页面跳转
                window.location.href = '/dev/views/job/page/login.html';
            }
        }
    </script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">职途万里</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;"><i class="layui-icon layui-icon-notice"></i></a>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">我的客服</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">面试</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;" id="jr_username">
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人资料</a></dd>
                    <dd><a href="javascript:;">设置</a></dd>
                    <dd><a href="javascript:quit();">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a id="pmg" href="/dev/views/employment/index.html"><i class="layui-icon layui-icon-form"></i> 职位管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/dev/views/employment/searchperson.html"><i class="layui-icon layui-icon-search"></i> 搜索牛人</a>

                </li>

                <li class="layui-nav-item"><a href="/dev/views/employment/recommend.html"><i class="layui-icon layui-icon-user"></i> 推荐牛人</a></li>
                <li id="chat" class="layui-nav-item"><a href="/dev/views/employment/chat.html"><i class="layui-icon layui-icon-chat"></i> 沟通</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="employment-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">


            <div class="main-message">
                <!--                包含聊天消息的div-->
                <!--                <div id="main" class="inner">-->
                <!--                    <div id="container">-->
                <!--                        <div class="message-container">-->
                <!--                            &lt;!&ndash;分模块div&ndash;&gt;-->
                <div class="message-wrap">
                    <!--左侧div-->
                    <div class="message-left">
                        <div class="message-HR">
                            <!--搜索栏-->
                            <div class="message-search">
                                <div class="message-search-main">
                                    <div class="icon-search">
                                        <i class="search-img"></i>
                                    </div>
                                    <input type="text" placeholder="搜索联系人" id="searchInput" class="search-input">
                                    <button type="button" id="searchButton">搜索</button>
                                </div>
                            </div>
                            <!--全部，新招呼-->
<!--                            <div class="lable-list">-->
<!--                                <ul>-->
<!--                                    <li class="selected">-->
<!--                                        <span>全部</span>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <span>新招呼</span>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <span>仅沟通</span>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <span>有交换</span>-->
<!--                                    </li>-->
<!--                                    <li>-->
<!--                                        <span>有面试</span>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
                            <!--正式聊天-->
                            <div class="message-content">
                                <!--装消息的div容器 10.5-->
                                <div class="hr-list" id="searchResults">
                                    <div class="hr-content">
                                        <ul role="thead">

                                        </ul>
                                        <ul role="group" style="padding: 0px;" id="chatMan">
                                            <!--每人一个div-->

                                            <!--新的人，新的li标签-->

                                            <!--新的人，新的li标签-->

                                        </ul>

                                        <!--没有更多0-->
                                        <div class="nomore">
                                            <div class="hr-list-nomore">
                                                <div class="nomore-text">没有更多了</div>
                                            </div>
                                        </div>
                                        <div style="width: 100%; height: 0px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!--分界线-->
                    <!--中间div-->
                    <div class="message-center">
                        <div style="margin: auto">
                            <span style="color: #fff9f5"><h3>点击左侧，开始聊天吧！！</h3></span>
                        </div>
                    </div>

                </div>
            </div>


            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
<!--            <div class="layui-footer">-->
<!--                &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
<!--                公告:高贤甫-->
<!--            </div>-->
        </div>
    </div>
</div>

<!--必须先引入jquery.min.js-->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/dev/plugins/layui/layui/layui.js"></script>
<script>
    //获取dom元素的引用

</script>

<!--搜索栏事件-->
<script>
    // const searchInput = document.getElementById('searchInput');
    // const searchButton = document.getElementById('searchButton');
    const searchResults = document.getElementById('searchResults');

    // searchButton.addEventListener('click', () => {
    //     let contactPerson = searchInput.value;
    //
    //     // 使用Ajax发送搜索请求
    //
    //     $.ajax({
    //         headers: {
    //             "id": localStorage.getItem("jrid"),
    //             "token": localStorage.getItem("jrtoken")
    //         },
    //         type: 'post',
    //         url: `/dev/searchMessage/search/${contactPerson}`,
    //         async: false,
    //         success: function (result) {
    //             function displaySearchResults(results) {
    //                 // 清空搜索结果区域
    //                 searchResults.innerHTML = '';
    //
    //                 // 循环遍历搜索结果并将其添加到DOM
    //                 for (const product of results) {
    //                     const productDiv = document.createElement('div');
    //                     productDiv.textContent = `产品名称: ${product.name}, 价格: ${product.price}`;
    //                     searchResults.appendChild(productDiv);
    //                 }
    //             }
    //         }
    //     })
    // })

</script>
<script>
    $(function () {
        let chat = document.querySelector("#chat")
        let pmg = document.querySelector("#pmg")
        let body = document.querySelector(".layui-body")
        let uname = document.querySelector("#jr_username")
        uname.innerHTML = `<img src="/dev/assets/img/head_photo.png" class="layui-nav-img">
                    Tom`
        pmg.className = 'layui-nav-item layui-nav-itemed'
        chat.className = 'layui-nav-item layui-this'
    })


    $(function () {
        let chatMan = document.getElementById("chatMan");
        $.ajax({
            headers: {
                "id": localStorage.getItem("jrid"),
                "token": localStorage.getItem("jrtoken")
            },
            type: "POST",
            url: `/dev/cANDm/chat/${localStorage.getItem("jrid")}`,
            async: false,
            success: function (result) {
                console.log(result.data.length)
                let data = result.data
                let src = ""
                for (let i = 0; i < data.length; i++) {
                    console.log(data)
                    src += `<li role="listitem" id="liaoT${data[i].jsId}">
                                                            <div class="first-content" onclick="liaohui(${data[i].jsId})">
                                                                <div class="figure">
                                                                    <img src="/dev/assets/img/gg.jpg" class="message-img">
                                                                </div>
                                                                <div class="text">
                                                                    <div class="title-box">
                                                                <span class="name-box">
                                                                    <span class="name-text">${data[i].jsName}</span>
                                                                    <!--|分节符-->
                                                                    <i class="vline"></i>
                                                                </span>
                                                                    </div>
                                                                    <div class="last-msg">
                                                                        <span class="last-msg-text">最新消息:${data[i].lastChatTime}</span>
                                                                        <div class="hr-operation">
                                                                            <img src="" class="icon-operate">
                                                                            <img src="" class="icon-operate">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>`
                }
                chatMan.innerHTML = src;
            }

        })
        let pri = new URLSearchParams(window.location.search);
        if (pri !== null) {
            let jsId = pri.get("jsId")
            if (jsId !== null) {

                $.ajax({
                    headers: {
                        "id": localStorage.getItem("jrid"),
                        "token": localStorage.getItem("jrtoken")
                    },
                    url: `/dev/jobSeeker/curric/${jsId}`,
                    async: false,
                    type: "POST",
                    success: function (result) {

                        let data = result.data;

                        let bol = true

                        for (let i = 0;i<chatMan.children.length;i++){
                            if (chatMan.children[i].id===`liaoT${jsId}`){
                                bol = false
                            }
                        }

                        if (bol){
                            let newsrc = `<li role="listitem" id="liaoT${jsId}">
                                                            <div class="first-content" onclick="liaohui(${jsId})">
                                                                <div class="figure">
                                                                    <img src="/dev/assets/img/gg.jpg" class="message-img">
                                                                </div>
                                                                <div class="text">
                                                                    <div class="title-box">
                                                                <span class="name-box">
                                                                    <span class="name-text">${data.jsName}</span>
                                                                    <!--|分节符-->
                                                                    <i class="vline"></i>
                                                                </span>
                                                                    </div>
                                                                    <div class="last-msg">
                                                                        <span class="last-msg-text">最新消息:${new Date()}</span>
                                                                        <div class="hr-operation">
                                                                            <img src="" class="icon-operate">
                                                                            <img src="" class="icon-operate">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>`
                            chatMan.innerHTML += newsrc;
                        }
                        liaohui(jsId)
                    }
                })
            }
        }
    })


</script>
<script type="text/javascript">
    function wsS(jsId, jrId) {
        let ws;
        //检测浏览器是否支持webSocket
        if ("WebSocket" in window) {
            // $("#im-list").html("您的浏览器支持webSocket!");
            //模拟产生clientID
            let clientID = jrId;

            //创建 WebSocket 对象,注意请求路径！！！！
            //部署的时候,需要修改成真实的ip地址
            ws = new WebSocket("ws://127.0.0.1:8088/dev/tt/" + clientID);

            //与服务端建立连接时触发
            ws.onopen = function () {
                // $("#im-list").append("<p>与服务端建立连接建立成功！您的客户端ID="+clientID+"</p>");
                const messageInput = document.getElementById("message-input");
                const sendButton = document.getElementById("send-button");
                const chatMessages = document.getElementById("chat-message");
                let imList = document.querySelectorAll(".im-list")[0]

                sendButton.addEventListener("click", () => {
                    // 获取消息文本
                    let messageText = messageInput.value.trim();
                    // if (document.getElementById("Mpicture").style.display!=="none"){
                    //     console.log(document.getElementById("Mpicture").src)
                    //     messageText += '❄'+document.getElementById("Mpicture").src
                    //     document.getElementById("Mpicture").style.display="none"
                    // }

                    if (messageText !== "") {
                        messageInput.value = ""
                        console.log(jsId)
                        ws.send(jsId + "|" + messageText + "|jr")
                        // ws.send(messageText);
                    }
                });

                // 监听输入框的回车键事件
                messageInput.addEventListener("keydown", (event) => {
                    if (event.key === "Enter") {
                        event.preventDefault(); // 防止回车键换行
                        sendButton.click(); // 模拟点击发送按钮
                    }
                });
                //模拟发送数据到服务器

            }

            //接收到服务端消息时触发
            ws.onmessage = function (evt) {

                let received_msg = evt.data;
                let fsId = received_msg.split("|")[0]
                let msg = received_msg.split("|")[1]

                let imList = document.querySelectorAll(".im-list")[0]

                let msgr = null
                let photo = null
                if (msg.includes('/assets/img/')){
                    if (msg.includes("❄")){

                        msgr = msg.split("❄")[0]
                        photo = msg.split("❄")[1]
                    } else {
                        msgr = msg
                    }
                } else {
                    msgr = msg
                }

                // $("#content").append("<p>接收到服务端消息:"+received_msg+"</p>");
                console.log(fsId)
                if (fsId === jrId) {
                    let str = `<li class="item-myself">
                      <div class="message-text">
                        <!--存放消息div-->
                        <!-- <div class="text" > -->
                        <img src="/dev/assets/img/gg.jpg"
                             class="message-img"
                             style="width: 46px;border-radius: 100%;float:right;">
                        <div class="text">
<!--                          <i class="status status-read"></i>-->
                          <div>
                            <p>
                              <!--发送消息的-->
                              <a href="${photo}" style="display: ${photo===null?'none':'block'};"  target="_blank">
                                    <img src="${photo}" style="display: ${photo===null?'none':'block'};height: 70px">
                              </a>
                              <span id="chat-message" style="display: ${msgr===null?'none':'block'}">${msgr}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!--清除浮动-->
                      <div style="clear: both;"></div>
                    </li>`
                    imList.innerHTML += str
                    document.getElementById("chat-in").scrollTop = document.getElementById("chat-in").querySelector(".im-list").offsetHeight;
                } else {
                    let str = `<li class="item-myself">
                      <div class="message-text">
                        <!--存放消息div-->
                        <!-- <div class="text" > -->
                        <img src="/dev/assets/img/gg.jpg"
                             class="message-img"
                             style="width: 46px;border-radius: 100%;float:left;">
                        <div class="text" style="float: none;background-color: white;border: 1px solid #0c0101;margin-left: 3px;border-radius: 8px;border-top-left-radius: 0">
<!--                          <i class="status status-read"></i>-->
                          <div>
                            <p>
                              <!--发送消息的-->
                              <a href="${photo}" style="display: ${photo===null?'none':'block'};"  target="_blank">
                                    <img src="${photo}" style="display: ${photo===null?'none':'block'};height: 70px">
                              </a>
                              <span id="chat-message" style="display: ${msgr===null?'none':'block'}">${msgr}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!--清除浮动-->
                      <div style="clear: both;"></div>
                    </li>`
                    imList.innerHTML += str
                    document.getElementById("chat-in").scrollTop = document.getElementById("chat-in").querySelector(".im-list").offsetHeight;
                }

            };

            //服务端关闭连接时触发
            ws.onclose = function () {
                console.error("连接已经关闭.....")
            };
        } else {
            $("#im-list").html("您的浏览器不支持webSocket！");
        }
    }


    function liaohui(jsId) {

        let jsLi = document.getElementById(`liaoT${jsId}`)
        for (let i=0;i<jsLi.parentNode.children.length;i++){
            if (jsLi.parentNode.children[i].id===`liaoT${jsId}`){
                jsLi.parentNode.children[i].children[0].style.backgroundColor="#b7ccba"
            } else {
                jsLi.parentNode.children[i].children[0].style.backgroundColor=""
            }
        }

        let jsName;
        let jsTelephone;

        $.ajax({
            headers:{
                "id": localStorage.getItem("jrid"),
                "token": localStorage.getItem("jrtoken")
            },
            type: "POST",
            url: `/dev/jobSeeker/curric/${jsId}`,
            async: false,
            success:function (result){
                jsName = result.data.jsName;
                jsTelephone = result.data.jsTelephone;
            }
        })


        let jrId = localStorage.getItem("jrid");

        let chatMessage = "";

        $.ajax({
            headers: {
                "id": localStorage.getItem("jrid"),
                "token": localStorage.getItem("jrtoken")
            },
            type: 'POST',
            url: `/dev/cANDm/chatMessageJS/${jrId}/${jsId}`,
            async: false,
            success: function (result) {
                // jsName = result.data
                console.log("==聊天记录==  ")
                console.log(result)
                if (result.code === 200) {

                    let data = result.data;
                    for (let i = 0; i < data.length; i++) {
                        let photo = null
                        let msg = null
                        if (data[i].message.includes('/assets/img/')){
                            if (data[i].message.includes("❄")){

                                msg = data[i].message.split("❄")[0]
                                photo = data[i].message.split("❄")[1]
                            } else {
                                msg = data[i].message
                            }
                        } else {
                            msg = data[i].message
                        }


                        if (data[i].sign === 0) {
                            chatMessage += `<li class="item-myself">
                      <div class="message-text">
                        <!--存放消息div-->
                        <!-- <div class="text" > -->
                        <img src="/dev/assets/img/gg.jpg"
                             class="message-img"
                             style="width: 46px;border-radius: 100%;float:left;">
                        <div class="text" style="float: none;background-color: white;border: 1px solid #0c0101;margin-left: 3px;border-radius: 8px;border-top-left-radius: 0">
<!--                          <i class="status status-read"></i>-->
                          <div>
                            <p>
                              <!--发送消息的-->
                              <a href="${photo}" style="display: ${photo===null?'none':'block'}" target="_blank">
                                <img src="${photo}" style="display: ${photo===null?'none':'block'};height: 70px">
                              </a>
                              <span  id="chat-message" style="display: ${msg===null?'none':'block'}" >${msg}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!--清除浮动-->
                      <div style="clear: both;"></div>
                    </li>`
                        }
                        if (data[i].sign === 1) {
                            chatMessage += `<li class="item-myself">
                      <div class="message-text">
                        <!--存放消息div-->
                        <!-- <div class="text" > -->
                        <img src="/dev/assets/img/gg.jpg"
                             class="message-img"
                             style="width: 46px;border-radius: 100%;float:right;">
                        <div class="text">
<!--                          <i class="status status-read"></i>-->
                          <div>
                            <p>
                              <!--发送消息的-->
                              <a href="${photo}" style="display: ${photo===null?'none':'block'}" target="_blank">
                                <img src="${photo}" style="display: ${photo===null?'none':'block'};height: 70px">
                              </a>
                              <span  id="chat-message" style="display: ${msg===null?'none':'block'}" >${msg}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                      <!--清除浮动-->
                      <div style="clear: both;"></div>
                    </li>`
                        }
                    }
                }
            }
        })


        console.log($(".message-center"))
        $(".message-center").html(`<div class="top-info" style="box-shadow: 0px 10px 10px #b7ccba">
                                        <div class="user-info">
                                            <p class="base-info">
                                                <span class="name">${jsName}</span>
                                                <span class="base-title">${jsTelephone}</span>
                                                <img style="display: none" src="https://img.bosszhipin.com/static/file/2022/fdszc4v9eo1672210548439.png"
                                                     width="53" height="20" class="chat-online-stats">
                                            </p>
                                            <!--置顶-->
<!--                                            <div class="content-import">-->
<!--                                                <a href="#" class="important-btn">置顶-->

<!--                                                </a>-->
<!--                                            </div>-->
                                        </div>
<!--                                        <div class="message-position-content">-->
<!--                                            &lt;!&ndash;预留出来&ndash;&gt;-->
<!--                                            <div class=""></div>-->
<!--                                            <div class="message-main">-->
<!--                                                <a href="" class="position-content">-->
<!--                                                    <span class="message-name">java开发</span>-->
<!--                                                    <span class="salary">10-60K</span>-->
<!--                                                    <span class="salary">成都</span>-->

<!--                                                </a>-->
<!--                                                <div class="right-content">-->
<!--                                                    <div class="guide-content">-->
<!--                                                        <div class="guide-icon"></div>-->
<!--                                                        <div>下载app</div>-->
<!--                                                    </div>-->
<!--                                                </div>-->
<!--                                                <div class="message-tips">温馨提示</div>-->
<!--                                            </div>-->
<!--                                        </div>-->

                                    </div>


                                    <!--空白区域-->
                                    <div class="message-import">
                                        <div class="message-record">
                                            <!--新增接收消息入口-->
                                            <!-- <div class="chat-messages" id="chat-messages"> -->
                                            <!-- 聊天消息将动态添加到这里 -->
                                            <!-- aaa
                                            <br>
                                            bbb -->
                                            <!-- </div> -->
                                            <div class="chat-message" id="chat-in">
                                                <ul class="im-list">
<!--                                                    <li class="item-myself">-->
<!--                                                        <div class="message-text">-->
<!--                                                            &lt;!&ndash;存放消息div&ndash;&gt;-->
<!--                                                            &lt;!&ndash; <div class="text" > &ndash;&gt;-->
<!--                                                            <div class="text" >-->
<!--                                                                &lt;!&ndash;                                                                <i class="status status-read"></i>&ndash;&gt;-->
<!--                                                                <div>-->
<!--                                                                    <p>-->
<!--                                                                        <span>您好!我对此工作很感兴趣,希望和你聊一下</span>-->
<!--                                                                    </p>-->
<!--                                                                </div>-->
<!--                                                            </div>-->
<!--                                                        </div>-->
<!--                                                        &lt;!&ndash;清除浮动&ndash;&gt;-->
<!--                                                        <div style="clear: both;"></div>-->
<!--                                                    </li>-->


                                                    <!--li标签，接着来li标签-->
<!--                                                    <li class="item-center">-->
<!--                                                        &lt;!&ndash;广告 advert&ndash;&gt;-->
<!--                                                        <div class="advert-center">-->
<!--                                                            <div class="advert-main">-->
<!--                                                                <div class="advert-img">-->
<!--                                                                    <img src="/dev/assets/img/h1.jpg" class="icon">-->
<!--                                                                </div>-->
<!--                                                                <div class="advert-container">-->
<!--                                                                    <p class="title">-->
<!--                                                                        该职位共-->
<!--                                                                        <img src="" class="msg-blur">-->
<!--                                                                        人投递-->
<!--                                                                    </p>-->
<!--                                                                    <p class="sub-title">竞争力排名在前-->
<!--                                                                        <img class="msg-blur" src="">-->
<!--                                                                    </p>-->
<!--                                                                </div>-->
<!--                                                            </div>-->
<!--                                                            <div class="footer">-->
<!--                                                                <a href="#" class="btn-light">点击查看个人竞争力分析</a>-->
<!--                                                            </div>-->
<!--                                                        </div>-->
<!--                                                    </li>-->

                                                    <li class="item-myself">
                                                        <div class="message-text">
                                                            <!--存放消息div-->
                                                            <!-- <div class="text" > -->

                                                        </div>
                                                        <!--清除浮动-->
                                                        <div style="clear: both;"></div>
                                                    </li>
                                                    ${chatMessage}
                                                </ul>
                                            </div>
                                            <!--ul-->

                                        </div>
                                        <!--就在这结束， message-import -->
                                    </div>


                                    <!--分界线-->
                                    <div class="message-controls" style="background-color: #b7ccba">
                                        <div class="chat-editor" style="background-color: #b7ccba">
                                            <div class="chat-controls" style="background-color: #b7ccba">
                                                <!--表情-->
<!--                                                <div aria-label="表情" class="icon btn-emotion"></div>-->
<!--                                                <div aria-label="常用语" class="icon btn-dict"></div>-->
<!--                                                <div aria-label="优先提醒" class="icon btn-online"></div>-->
<!--                                                <div aria-label="发送图片" class="icon btn-sendimg">-->
<!--                                                    <input type="file" accept="img/gif,img./jepg,img/jpg,img/png">-->
<!--                                                </div>-->
                                            </div>


                                            <!--分界线-->
                                            <!-- contenteditable="true" 可以进行文本的输入 -->
                                            <!-- <div id="chat-input" contenteditable="true" class="chat-input">

                                            </div>
                                            <div class="chat-op">
                                                <span class="tip">按Enter键发送,按Ctrl+Enter键换行</span>
                                                <button type="button" id="send-button" class="btn-send">发送</button>
                                            </div> -->


                                            <!--聊天消息会动态添加到这里-->

                                            <div class="chat-op" style="height: 170px;background-color: #b7ccba; border: 2px solid black;border-radius: 7px">
                                                <input class="tip" style="padding-left: 3px;background-color: #b7ccba; color: black;" id="message-input" placeholder="按Enter键发送,按Ctrl+Enter键换行">
                                                <button type="button" id="send-button" style="height: 27px;margin-top: 90px;float: right" class="btn-send">发送</button>

                                            </div>


                                            <!----->




                                        </div>
                                    </div>`)

        document.getElementById("chat-in").scrollTop = document.getElementById("chat-in").querySelector(".im-list").offsetHeight;
        wsS(jsId, jrId);
    }

    function quit() {
        localStorage.removeItem("jrid");
        localStorage.removeItem("jrtoken");
        window.location = '/dev/views/job/page/login.html'
    }


    let searchButton = document.getElementById("searchButton")
    searchButton.onclick=function (){
        let searchInput = document.getElementById("searchInput").value
        let chatMan = document.getElementById("chatMan")
        if (searchInput!==""){
            for (let i=0;i<chatMan.children.length;i++){
                let src = chatMan.children[i].children[0].children[1].children[0].children[0].children[0].innerText
                let Ssrc = new RegExp(searchInput)
                if (!Ssrc.test(src)){
                    chatMan.children[i].style.display="none"
                }else {
                    chatMan.children[i].style.display=""
                }
            }
        } else {
            for (let i=0;i<chatMan.children.length;i++){
                chatMan.children[i].style.display=""
            }
        }
    }
</script>
</body>
</html>